<template>
  <div>
    <h1>Childview</h1>
    <p>{{ title }}</p>
    <p>{{ age }}</p>
    <div>
      <button type="button" @click="currentFn">emit()</button>
    </div>
  </div>
</template>

<script>
import { toRefs } from 'vue'
export default {
  props: {
    title: String,
    age: Number
  },
  setup(props, content) {
    // console.log(props)
    const { title, age } = toRefs(props) // 要使用props属性，必须要使用props选项来说明有哪些props属性。

    console.log('title', title)
    console.log('age', age)

    // console.log(content) // vue的上下文对象：对象只包括右边4个属性 {attrs, emit, expose,slots }

    const { emit, attrs } = content
    console.log(attrs) //包括了除Props属性以外的属性：Proxy {a: 100, b: 'hell'}
    // expose: 暴露组件自己的属性，让父组件可以在$children中看见。
    // slots: $slots一样，插槽的集合
    const currentFn = () => {
      emit('myclick', age)
    }

    return {
      currentFn
    }
  }
}
</script>

<style></style>
